<template>
  <el-dialog
    class="import-project-dialog"
    width="500px"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    v-dialogDrag="true"
    @open="handleDialogOpen"
    @closed="handleDialogClosed"
  >
    <template slot="title">
      <span class="el-dialog__title">导入合同项目</span>
    </template>

      <el-upload
        style="text-align: center;"
        ref="uploadRef"
        :headers="uploadParams.headers"
        :action="uploadParams.url"
        accept=".xlsx, .xls"
        :limit="1"
        :disabled="false"
        :auto-upload="false"
        :drag="true"
        :on-success="handleUploadSuccess"
        :on-error="handleUploadError"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px; vertical-align: baseline;" @click="handleDownloadTemplate">下载模板</el-link>
        </div>
      </el-upload>

    <div class="dialog-footer" slot="footer">
      <el-button style="margin-right: 50px;" type="primary" @click="handleConfirm">确认</el-button>
      <el-button @click="dialogVisible = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getToken } from '@/utils/auth'

export default {
  name: 'CompleteContractDialog',
  components: {},
  dicts: [],
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: () => ({})
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show
      },
      set(value) {
        this.$emit('update:show', value)
      }
    }
  },
  data() {
    return {
      uploadParams: {
        headers: { Authorization: 'Bearer ' + getToken() },
        url: process.env.VUE_APP_BASE_API + '/basic/agreementItem/importData',
      }
    }
  },
  created() {
  },
  methods: {
    // 弹框打开时
    handleDialogOpen() {

    },
    // 弹框关闭时
    handleDialogClosed() {
    },
    handleDownloadTemplate() {
      this.download('/basic/agreementItem/exportTemplate', {}, `合同项目模板_${new Date().getTime()}.xlsx`)
    },
    handleUploadSuccess(response, file, fileList) {
      if (response.code === 200) {
        this.$message.success('导入成功')
        this.dialogVisible = false
        this.$emit('refresh')
      } else {
        this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      }
      this.$refs.uploadRef.clearFiles();
    },
    handleUploadError(err, file, fileList) {
      this.$message.error('导入失败')
    },
    // 点击确认
    handleConfirm() {
      this.$refs.uploadRef.submit();
    },
  },
}
</script>

<style lang="scss" scoped>
.import-project-dialog {

  ::v-deep .el-dialog__body {
    max-height: 85vh;
    overflow-y: auto;
  }
}
</style>
